
<!DOCTYPE html>
<html>
<head>
    <title>注册 - 麻雀博客</title>
    <#include "../common/link.ftl">
</head>
<body>

<#include "../common/header.ftl">

<div class="layui-container fly-marginTop">
  <div class="fly-panel fly-panel-user" pad20>
    <div class="layui-tab layui-tab-brief" lay-filter="user">
      <ul class="layui-tab-title">
        <li><a href="${ctx.contextPath}/user/login">登入</a></li>
        <li class="layui-this">注册</li>
      </ul>
      <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
        <div class="layui-tab-item layui-show">
          <div class="layui-form layui-form-pane">
            <#--<form>-->
                <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">手机</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_phone" name="phone" required="" lay-verify="phone" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_vercode" class="layui-form-label">验证码</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_imagecode" name="imagecode" required="" lay-verify="required" autocomplete="off" class="layui-input" >
                    </div>
                    <div class="layui-form-mid" style="padding: 0!important;">
                        <img class="pointer" id="img_tag" height="38" src="${ctx.contextPath}/code/captcha.jpg" alt="点击刷新" onclick="refreshCode()"/>
                    </div>
                </div>
                <#--<div class="layui-form-item">
                  <label for="L_vercode" class="layui-form-label">验证码</label>
                  <div class="layui-input-inline">
                    <input type="text" id="L_vercode" name="vercode" required="" lay-verify="required" placeholder="请输入手机短信验证码" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid" style="padding: 0!important;">
                    <button type="button" class="layui-btn layui-btn-normal" id="FLY-getvercode">获取验证码</button>
                  </div>
                </div>-->
                <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label">博客名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="L_username" name="username" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="radio" name="gender" value="男" checked title="男">
                            <input type="radio" name="gender" value="女" title="女">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_password" name="password" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" id="L_repass" name="repass" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <#--<div class="layui-form-item" style="position: relative; left: -10px; height: 32px;">
                    <input type="checkbox" name="agreement" lay-skin="primary" title="" checked="">
                    <div class="layui-unselect layui-form-checkbox" lay-skin="primary">
                        <i class="layui-icon layui-icon-ok"></i>
                    </div>
                    <a href="/instructions/terms.html" target="_blank" style="position: relative; top: 4px; left: 5px; color: #999;">同意用户服务条款</a>
                </div>-->
                <div class="layui-form-item">
                  <button class="layui-btn" lay-filter="*" id="reg_btn">立即注册</button>
                </div>
                <#--<div class="layui-form-item fly-form-app">
                  <span>或者直接使用社交账号快捷注册</span>
                  <a href="/app/qq" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-qq" title="QQ登入"></a>
                  <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" class="iconfont icon-weibo" title="微博登入"></a>
                </div>-->
            <#--</form>-->
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<#include "../common/footer.ftl">

<script type="text/javascript">
    $("#img_tag").on("click", function(){
        $("#img_tag").attr("src" ,"${ctx.contextPath}/code/captcha.jpg?t=" + $.now());
    });

    var authCode = false;
    var resultMsg = "";
    $("#L_imagecode").blur(function () {
        debugger;
        var imagecode = $("#L_imagecode").val();
        if (imagecode == "") {
            return;
        }
        $.ajax({
            url: "${ctx.contextPath}/code/authImageCode",
            type: "POST",
            dataType: "json",
            data: {imagecode: imagecode},
            success:function (result) {
                debugger;
                if (result.status == "0") {
                    authCode = false;
                    resultMsg = result;
                    focus_addclass($("#L_imagecode"));
                    error_msg(result.msg);
                } else {
                    authCode = true;
                }
            }
        });
    });

    $("#reg_btn").on("click", function () {
        if ( !check_phone($("#L_phone")) || !check_val($("#L_imagecode"))
                || !check_val($("#L_imagecode")) || !check_val($("#L_username")) || !check_passwd($("#L_password"))) {
            return;
        }

        var phone = $("#L_phone").val();
        var username = $("#L_username").val();
        var gender = $("input[name='gender']:checked").val();
        var password = $("#L_password").val();
        var repasswd = $("#L_repass").val();

        if (!authCode) {
            focus_addclass($("#L_imagecode"));
            error_msg(resultMsg==""?"请输入图形码":resultMsg);
            return;
        }

        if (password != repasswd) {
            focus_addclass($("#L_repass"));
            error_msg("两次输入密码不一致");
            return;
        }

        $.ajax({
            url: "${ctx.contextPath}/user/register",
            type: "POST",
            dataType: "JSON",
            data: {phone:phone,username:username,gender:gender,password:password},
            success: function (result) {
                debugger;
                if (result.status == "1") {
                    success_msg(result.msg);
                    $("#L_phone").val("");
                    $("#L_username").val("");
                    $("#L_password").val("");
                    $("#L_repass").val("");
                    $("#L_imagecode").val("");
                } else {
                    error_msg(result.msg);
                }
            }
        });

    });
</script>

</body>
</html>